<div id="price-tables" class="page-layout simple fullwidth doc-page">

    <!-- HEADER -->
    <div class="header md-accent-bg" layout="row" layout-align="space-between">
        <div layout="column" layout-align="center start">
            <div class="breadcrumb" layout="row" layout-align="start center">
                <md-icon md-font-icon="icon-home" class="s16"></md-icon>
                <md-icon md-font-icon="icon-chevron-right" class="s16 separator"></md-icon>
                <span class="parent">PAGES</span>
            </div>
            <div class="title">Price Tables</div>
        </div>
    </div>
    <!-- / HEADER -->

    <!-- CONTENT -->
    <div class="content">

        <!-- STYLE 1 -->
        <div class="md-title">Style 1</div>

        <div class="price-tables" flex layout="row" layout-wrap>
            <div class="price-table style-1 md-whiteframe-1dp" layout="column">
                <div class="package-type md-primary-bg">
                    <span>BASIC</span>
                </div>

                <div class="price" layout="row" layout-align="center start">
                    <div class="currency">$</div>
                    <div layout="row" layout-align="center end">
                        <div class="value">4</div>
                        <div class="period">/ month</div>
                    </div>
                </div>

                <md-divider></md-divider>

                <div class="terms" layout="column">
                    <div class="term"><span class="text-bold">10</span> Projects</div>
                    <div class="term"><span class="text-bold">10</span> Pages</div>
                    <div class="term"><span class="text-bold">100</span> Mb Disk Space</div>
                </div>

                <md-button class="cta-button md-raised md-accent">BUY NOW</md-button>
            </div>

            <div class="price-table style-1 md-whiteframe-8dp" layout="column">
                <div class="package-type md-primary-bg" layout="row" layout-align="space-between center">
                    <span>STANDARD</span>
                    <span class="sale md-accent-color md-hue-1">Save 15%</span>
                </div>

                <div class="price" layout="row" layout-align="center start">
                    <div class="currency">$</div>
                    <div layout="row" layout-align="center end">
                        <div class="value">8</div>
                        <div class="period">/ month</div>
                    </div>
                </div>

                <md-divider></md-divider>

                <div class="terms" layout="column">
                    <div class="term"><span class="text-bold">20</span> Projects</div>
                    <div class="term"><span class="text-bold">20</span> Pages</div>
                    <div class="term"><span class="text-bold">200</span> Mb Disk Space</div>
                </div>

                <md-button class="cta-button md-raised md-accent">BUY NOW</md-button>
            </div>

            <div class="price-table style-1 md-whiteframe-1dp" layout="column">
                <div class="package-type md-primary-bg" layout="row">
                    <span>ADVANCED</span>
                </div>

                <div class="price" layout="row" layout-align="center start">
                    <div class="currency">$</div>
                    <div layout="row" layout-align="center end">
                        <div class="value">12</div>
                        <div class="period">/ month</div>
                    </div>
                </div>

                <md-divider></md-divider>

                <div class="terms" layout="column">
                    <div class="term"><span class="text-bold">40</span> Projects</div>
                    <div class="term"><span class="text-bold">40</span> Pages</div>
                    <div class="term"><span class="text-bold">500</span> Mb Disk Space</div>
                </div>

                <md-button class="cta-button md-raised md-accent">BUY NOW</md-button>
            </div>
        </div>
        <!-- / STYLE 1 -->

        <!-- STYLE 2 -->
        <div class="md-title">Style 2</div>

        <div class="price-tables" flex layout="row" layout-wrap>
            <div class="price-table style-2 md-whiteframe-1dp" layout="column">
                <div class="package-type md-accent-fg">SILVER PACKAGE</div>

                <div class="price" layout="row" layout-align="center start">
                    <div class="currency">$</div>
                    <div class="value">99</div>
                </div>

                <div class="period">PER MONTH</div>

                <div class="terms" layout="column" layout-align="start center">
                    <div class="term"><span class="text-bold">10</span> Projects</div>
                    <div class="term"><span class="text-bold">10</span> Pages</div>
                    <div class="term"><span class="text-bold">100</span> Mb Disk Space</div>
                </div>

                <md-button class="cta-button md-raised md-accent">GET STARTED</md-button>
            </div>

            <div class="price-table style-2 md-whiteframe-8dp" layout="column">
                <div class="badge md-warn-bg">BEST VALUE</div>

                <div class="package-type md-accent-fg">GOLD PACKAGE</div>

                <div class="price" layout="row" layout-align="center start">
                    <div class="currency">$</div>
                    <div class="value">299</div>
                </div>

                <div class="period">PER MONTH</div>

                <div class="terms" layout="column" layout-align="start center">
                    <div class="term"><span class="text-bold">20</span> Projects</div>
                    <div class="term"><span class="text-bold">20</span> Pages</div>
                    <div class="term"><span class="text-bold">200</span> Mb Disk Space</div>
                </div>

                <md-button class="cta-button md-raised md-accent">GET STARTED</md-button>
            </div>

            <div class="price-table style-2 md-whiteframe-1dp" layout="column">
                <div class="package-type md-accent-fg">PLATINUM PACKAGE</div>

                <div class="price" layout="row" layout-align="center start">
                    <div class="currency">$</div>
                    <div class="value">499</div>
                </div>

                <div class="period">PER MONTH</div>

                <div class="terms" layout="column" layout-align="start center">
                    <div class="term"><span class="text-bold">40</span> Projects</div>
                    <div class="term"><span class="text-bold">40</span> Pages</div>
                    <div class="term"><span class="text-bold">500</span> Mb Disk Space</div>
                </div>

                <md-button class="cta-button md-raised md-accent">GET STARTED</md-button>
            </div>
        </div>
        <!-- / STYLE 2 -->

        <!-- STYLE 3 -->
        <div class="md-title">Style 3</div>

        <div class="price-tables" flex layout="row" layout-align="start start" layout-wrap>
            <div class="price-table style-3 md-whiteframe-1dp" layout="column">
                <div class="package-type">
                    <div class="title">Starter</div>
                    <div class="subtitle">For small teams</div>
                </div>

                <div class="price md-primary-bg md-hue-3" layout="row" layout-align="center start">
                    <div class="currency">$</div>
                    <div layout="row" layout-align="center end">
                        <div class="value">29</div>
                        <div class="period">monthly per user</div>
                    </div>
                </div>

                <div class="terms" layout="column" layout-align="start center">
                    <div class="term">Unlimited projects</div>
                    <div class="term">Unlimited pages</div>
                    <div class="term">Unlimited disk space</div>
                    <div class="term">24 / 7 Free support</div>
                </div>

                <md-button class="cta-button md-raised md-accent">GET STARTED FREE</md-button>

                <div class="note">7 day free trial to start</div>
            </div>

            <div class="price-table style-3 md-whiteframe-8dp" layout="column">
                <div class="package-type">
                    <div class="title">Pro</div>
                    <div class="subtitle">For larger teams</div>
                </div>

                <div class="price md-primary-bg" layout="row" layout-align="center start">
                    <div class="currency">$</div>
                    <div layout="row" layout-align="center end">
                        <div class="value">59</div>
                        <div class="period">monthly per user</div>
                    </div>
                </div>

                <div class="terms" layout="column" layout-align="start center">
                    <div class="term">Unlimited projects</div>
                    <div class="term">Unlimited pages</div>
                    <div class="term">Unlimited disk space</div>
                    <div class="term">24 / 7 Free support</div>
                    <div class="term md-warn-fg">Advanced reporting</div>
                    <div class="term md-warn-fg">Customizable interface</div>
                    <div class="term md-warn-fg">CRM Integration</div>
                </div>

                <md-button class="cta-button md-raised md-accent">GET STARTED FREE</md-button>

                <div class="note">30 day free trial to start</div>
            </div>

            <div class="price-table style-3 md-whiteframe-1dp" layout="column">
                <div class="package-type">
                    <div class="title">Enterprise</div>
                    <div class="subtitle">For big teams</div>
                </div>

                <div class="price md-primary-bg md-hue-3" layout="row" layout-align="center start">
                    <div class="currency">$</div>
                    <div layout="row" layout-align="center end">
                        <div class="value">99</div>
                        <div class="period">monthly per user</div>
                    </div>
                </div>

                <div class="terms" layout="column" layout-align="start center">
                    <div class="term">Unlimited projects</div>
                    <div class="term">Unlimited pages</div>
                    <div class="term">Unlimited disk space</div>
                    <div class="term">For full feature list, call us</div>
                </div>

                <md-button class="cta-button md-raised md-accent">CALL US</md-button>

                <div class="note">90 day free trial to start</div>
            </div>
        </div>
        <!-- / STYLE 3 -->

    </div>
    <!-- / CONTENT -->

</div>